<template>
  <!--  审核应收账单-->
  <div class="repair-container">
    <!--搜索-->
    <section class="direct-content-wrapper">
      <!-- 搜索区 -->
      <Search
        :search-data="searchParams"
        :search-options="searchOptions"
        @clearAll="resetDate"
        @onSearch="onSearch"
      />
    </section>
    <!--  列表-->
    <div class="table_box">
      <div class="top_button">
        <el-button type="primary" @click="batchProcess">批量审核</el-button>
        <el-button type="primary" @click="batchExport">批量导出</el-button>
      </div>
      <div>
        <Table
          ref="table"
          class="table_two"
          :table-data="tableData"
          @handleNumChange="handleNumChange"
          @handleSelectionChange="handleSelectionChange"
          @handleSizeChange="handleSizeChange"
        >
          <el-table-column
            slot="action"
            align="center"
            fixed="right"
            label="操作"
            width="240"
          >
            <template slot-scope="scope">
              <el-tooltip content="审核通过" placement="bottom">
                <el-button type="success" icon="el-icon-postcard" size="mini" @click="successProcess(scope.row)" />
              </el-tooltip>
              <el-tooltip content="审核驳回" placement="bottom">
                <el-button size="mini" type="danger" icon="el-icon-edit" @click="cancelProcess(scope.row)" />
              </el-tooltip>
            </template>
          </el-table-column>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>

import Search from '@/components/search/index.vue'
import Table from '../../components/table/index'

export default {
  name: 'ReviewAccountsReceivable',
  components: { Search, Table },
  data() {
    return {
      dialogVisible: false, // 弹窗
      titleInfo: '新增', // 弹窗名称
      // 分页参数
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      // 搜索条件
      searchParams: {
        type2: '' // 审核状态
      },
      // 搜索表单配置项
      searchOptions: [
        {
          type: ['select'],
          label: '审核状态：',
          prop: 'type2',
          width: '180px',
          placeholder: '请选择审核状态',
          data: [
            {
              value: 1,
              label: '审核通过'
            },
            {
              value: 2,
              label: '审核中'
            },
            {
              value: 3,
              label: '审核驳回'
            }
          ]
        }
      ],
      // 表格默认字段
      tableData: {
        columns: [
          {
            selection: true
          },
          {
            index: true,
            indexMethod(index) {
              return index + 1
            }
          },
          {
            prop: '0',
            label: '收费对象'
          },
          {
            prop: '1',
            label: '收费标准'
          },
          {
            prop: '2',
            label: '收费周期'
          },
          {
            prop: '3',
            label: '应收金额'
          },
          {
            prop: '4',
            label: '审核状态'
          },
          {
            slot: 'action'
          }
        ],
        data: [
          {
            0: '收费对象111',
            1: '收费标准111',
            2: '收费周期1个月',
            3: '1886.88',
            4: '审核通过'
          },
          {
            0: '收费对象222',
            1: '收费标准222',
            2: '收费周期2个月',
            3: '2886.88',
            4: '审核中'
          },
          {
            0: '收费对象333',
            1: '收费标准333',
            2: '收费周期3个月',
            3: '3886.88',
            4: '审核驳回'
          }
        ],
        total: 0
      }
    }
  },
  mounted() {
    // 默认form数据
    this.resetForm()
    // 初始化表格数据
    this.initList()
  },
  methods: {
    // 初始化表格数据
    initList() {
    },
    batchProcess() {
      console.log('批量通过')
    },
    batchExport() {
      console.log('批量导出')
    },
    // 审核通过
    successProcess(row) {
      this.$confirm('请确认是否通过该应收帐单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '审核通过!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 审核驳回
    cancelProcess(row) {
      this.$confirm('请确认是否驳回该应收帐单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '审核驳回!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 重置
    resetDate() {
      this.resetPage()
      this.initList()
    },
    // 搜索
    onSearch(searchFormData) {
      console.log(searchFormData, this.searchParams)
    },
    // 重置分页
    resetPage() {
      this.pagination = {
        pageSize: 10,
        pageNum: 1
      }
      this.$refs.table.pagination = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 分页选择
    handleNumChange(pagination) {
      this.pagination = pagination
      this.initList()
      // console.log(pagination, '改变页数')
    },
    handleSizeChange(pagination) {
      this.pagination = pagination
      this.initList()
      // console.log(pagination, '改变条数')
    },
    // 选择表格数据
    handleSelectionChange(val) {
      console.log(val, '选择的表格数据')
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-container {
  background: #f0f2f5;
  padding: 20px;
}

.direct-content-wrapper {
  margin-bottom: 20px;
}

.table_box {
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;
}

.top_button {
  height: 60px;
}

.table_two {
  width: 100%;
}
</style>
